<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('首页')" />

</head>
<script src="js/index.js"></script>
<body>

<th:block th:include="include :: top" />

<header class="index-top">
    <a href="./" class="logo">
        <img src="img/logo.png">
    </a>
    <div class="search">
        <form action="search" >
            <input type="text" value="" name="keyword">
            <button class="search-button" type="submit">搜索</button>
        </form>
        <ul class="search-below">
            <li th:each="c, vs : ${categories}">
                <a th:if="${vs.count >= 1 and vs.count <= 4}" th:href="@{/category(id=${c.id})}" th:text="${c.name}"></a>
            </li>
        </ul>

    </div>

</header>

<section class="head-bar">
    <div class="c-menu">
        <span class="glyphicon glyphicon-th-list icon"></span>
        <span>商品分类</span>
    </div>
    <div class="r-menu">
        <a href="#nowhere"><img src="img/chaoshi.png"></a>
        <a href="#nowhere"><img src="img/guoji.png"></a>
        <a th:each="c, vs : ${categories}" th:if="${vs.count >= 1 and vs.count <= 4}">
            <a th:href="@{/category(id=${c.id})}" th:text="${c.name}"></a>
        </a>
    </div>
</section>

<section class="carousel">
    <div data-ride="carousel" class="carousel-of-product carousel slide" id="carousel-of-product" >
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li class="active" data-slide-to="0" data-target="#carousel-of-product"></li>
            <li data-slide-to="1" data-target="#carousel-of-product" class=""></li>
            <li data-slide-to="2" data-target="#carousel-of-product" class=""></li>
            <li data-slide-to="3" data-target="#carousel-of-product" class=""></li>
        </ol>
        <!-- Wrapper for slides -->
        <div role="listbox" class="carousel-inner">
            <div class="item active">
                <a href="/product?id=27" target="_blank">
                    <img src="img/1.jpg" class="carousel carousel-image">
                </a>
            </div>
            <div class="item">
                <a href="/product?id=1" target="_blank">
                    <img src="img/2.jpg" class="carousel-image">
                </a>
            </div>
            <div class="item">
                <a href="/product?id=20" target="_blank">
                    <img src="img/3.png" class="carousel-image">
                </a>
            </div>
            <div class="item">
                <a href="/product?id=30" target="_blank">
                    <img src="img/4.png" class="carousel-image">
                </a>
            </div>
        </div>

        <div class="m-menu">
            <ul>
                <li th:each="c, vs : ${categories}" th:if="${vs.index >= 0 and vs.index <= 12}">
                    <span class="glyphicon glyphicon-link"></span>
                    <a th:href="@{/category(id=${c.id})}" th:text="${c.name}"></a>
                </li>
            </ul>
        </div>


    </div>

</section>
<!--th:if="${c.recommend > 0}"-->
<main class="index">
    <div th:each="c : ${categories}" class="products">
        <div class="title-bar">
            <i class="color-mark"></i>
            <span class="category-title" th:text="${c.name}"></span>
        </div>

        <div class="product-items">
            <div th:each="p : ${c.products}" class="item">
                <a th:href="@{/product(id=${p.id})}">
                    <img th:src="${p.image}">
                    <div class="item-title" ></div>
                    <div class="item-price">￥[[${p.Price}]]</div>
                </a>
            </div>
        </div>
    </div>

    <img src="img/end.png" class="end-png" id="endpng">
</main>

<th:block th:include="include :: footer" />

</body>
</html>


